require(['config'],()=>{
    require(['jquery','header'],()=>{
        require(['pAjax','paging','footer','floater'],()=>{
            class Wares{
                constructor(){
                    this.ul=document.querySelectorAll('#wares>ul')
                    this.init()
                }
                init(){
                    this.request()
                    this.option()
                    let user=JSON.parse(localStorage.getItem('username'))
                    if(user){
                        this.totalNum()
                    }else{
                        this.numHeader.innerHTML=0
                    }
                }
                //请求数据
                request() {
                    pAjax({
                            url: '/api/goods.json'
                        })
                        .then(data => {
                            let res = JSON.parse(data)
                            let res1 = res.slice(10, 70)
                            let res2 = res.slice(70, 130)
                            let res3 = res.slice(130, 190)
                            let res4 = res.slice(190, 250)
                            let res5 = res.slice(250, 310)
                            let res6 = res.slice(310, 370)
                            let dataAll=[]
                            dataAll.push(res1,res2,res3,res4,res5,res6)
                            this.wares_render(dataAll,res)
                        })
                }
                //渲染商品
                wares_render(data,res) {
                    for(let i=0;i<data.length;i++){
                        data[i].forEach(item=>{
                            this.ul[i].innerHTML+=`
                                <li>
                                    <div data-id="${item.goods_id}" class="goDetails">
                                        <img src="${item.img_small_logo}">
                                        <p>${item.title}</p>
                                        <span>¥${item.price}</span>
                                    </div>
                                    <button data-id="${item.goods_id}" class="goCart">加入购物车</button>
                                </li>
                            `
                        })
                    }
                    let btn=document.querySelectorAll('.goCart')
                    let goDetails=document.querySelectorAll('.goDetails')
                    // this.option()
                    this.bindHtml(res,btn,goDetails)
                    this.totalNum()
                    this.wares_paging()
                }
                //分页器
                wares_paging(){
                    $(".show").paging({
                        PageNum: 12, //每页显示数目
                        pageMax: false, //按钮长度是否显示
                        pageMaxHideShow: false, //在最后一个的时候是否隐藏按钮长度
                        pageDownUpHide: false, //到第一个或最后一个是否让上一页或下一页消失
                        pageInput: false, //是否使用文本框输入跳转
                        pagingBtnHide: false, //是否让按钮变为一个
                        pagingBtnPaging: false,//按钮是否分页
                        pagingDisplay: "flex"//显示的属性，弹性盒子还是块化
                    })
                }
                //选项卡功能
                option(){
                    let that=this
                    $('#option>ul>li').on('click',function (){
                        $(this).addClass('active').siblings().removeClass('active')
                        $('#wares ul').eq($(this).index()).addClass('show').siblings().removeClass('show')
                        $('#wares ul>li').removeClass('paging_box')
                        that.wares_paging()
                    })
                }
                //加入购物车
                bindHtml(res,btn,goDetails){
                    btn.forEach(target=>{
                        target.onclick=()=>{
                            let user=JSON.parse(localStorage.getItem('username'))
                            if(user){
                                let id = target.dataset.id - 0
                                let goods =res.find(item=>{return item.goods_id==id})
                                let list = JSON.parse(localStorage.getItem('cart')) || []
                                if(!list.length){
                                    list.push(goods)
                                    goods.cart_number = 1
                                }else{
                                    let res = list.some(item=>{return item.goods_id == id})
                                    if(res){
                                        let index = list.findIndex(item=>{return item.goods_id == id})
                                        list[index].cart_number++
                                    }else{
                                        list.push(goods)
                                        goods.cart_number = 1
                                    }
                                }
                                localStorage.setItem('cart', JSON.stringify(list))
                                this.totalNum()
                            }else{
                                this.numHeader.innerHTML=0
                                if(confirm('请先登录')){
                                    location.href="/html/login.html"
                                }else{
                                    return false
                                }
                            }
                        }
                    })
                    goDetails.forEach(target=>{
                        target.onclick=()=>{
                            let id = target.dataset.id - 0
                            window.open(`/html/details.html?id=${id}`)
                        }
                    })
                }
                totalNum(){
                    let list = JSON.parse(localStorage.getItem('cart')) || []
                    let num = 0
                    list.forEach(item=>{
                        num += item.cart_number
                    })
                    $('.numHeader')[0].innerHTML= '&nbsp;'+num
                }
            }
            new Wares()
        })
    })
})